<script setup>
import { User, PlayOne, Like, Record, Time, Return, Pause } from '@icon-park/vue-next'
import { useRoute, useRouter } from 'vue-router'
import { getCoverService } from '@/api/download.js'
import { getMusicService } from '@/api/music.js'
import { isCode1 } from '@/utils/response.js'
import { ref, computed } from 'vue'
import { delSongService, likeSongService } from '@/api/userLike.js'
import { successMsg } from '@/utils/sendMsgUtils.js'
import MusicPlayMini from '@/components/music/MusicPlayMini.vue'

const router = useRouter()
const route = useRoute()

const isPlay = ref(false)
const music = ref({
  id: route.query.id,
  name: '',
  artist: '',
  duration: '',
  isLove: false
})
const sendMusic = (m, index) => {
  music.value = m
  music.value.index = index
  music.value.time = Date.now()
  isPlay.value = !isPlay.value
}
const getMusic = async () => {
  const resp = await getMusicService(music.value.id)
  if (isCode1(resp)) {
    music.value = resp.data
  }
}
getMusic()

const formattedTime = computed(() => {
  const [minutes, seconds] = music.value.duration.split(':') // 分割分钟和秒
  return `${minutes}分${seconds}秒`
})

const likeSong = async () => {
  const resp = await likeSongService(music.value.id)
  if (isCode1(resp)) {
    successMsg(resp.data)
    music.value.isLove = true
  }
}
const delSong = async () => {
  const resp = await delSongService(music.value.id)
  if (isCode1(resp)) {
    successMsg(resp.data)
    music.value.isLove = false
  }
}
</script>

<template>
  <div class="header-title">
    <el-container>
      <el-aside width="250px">
        <van-image
          width="250px"
          height="250px"
          :src="getCoverService(route.query.id)"
        >
          <template v-slot:error>
            <music theme="outline" size="20" fill="#333" :strokeWidth="3" />
          </template>
        </van-image>
      </el-aside>
      <el-container>
        <el-header>
          {{ music.name }}
        </el-header>
        <el-main>
          <van-row>
            <van-col span="3" class="icon-center">
              <user theme="outline" size="18" fill="#333" />
              &nbsp;作者：
            </van-col>
            <van-col span="15">
              {{ music.artist }}
            </van-col>
          </van-row>
          <van-row>
            <van-col span="3" class="icon-center">
              <record theme="outline" size="18" fill="#333" />
              &nbsp;专辑：
            </van-col>
            <van-col span="15">
              {{ music.album }}
            </van-col>
          </van-row>
          <van-row>
            <van-col span="3" class="icon-center">
              <Time theme="outline" size="18" fill="#333" />
              &nbsp;时长：
            </van-col>
            <van-col span="15">
              {{ formattedTime }}
            </van-col>
          </van-row>
          <MusicPlayMini :music="music"></MusicPlayMini>
          <div class="btn">
            <el-button v-show="!isPlay" @click="sendMusic(music, 1)" size="large" type="primary" plain>
              <play-one class="icon-center" theme="outline" size="24" />
              &nbsp;播放
            </el-button>
            <el-button v-show="isPlay" @click="sendMusic(music, -1)" size="large" type="primary" plain>
              <pause  class="icon-center" theme="outline" size="24" />
              &nbsp;暂停
            </el-button>
            <el-button @click="delSong" v-if="music.isLove" size="large" type="primary" plain>
              <like class="icon-center" theme="outline" size="22" />
              &nbsp;取消收藏
            </el-button>
            <el-button @click="likeSong" v-else size="large" type="primary" plain>
              <like class="icon-center" theme="outline" size="22" />
              &nbsp;收藏
            </el-button>
            <el-button @click="router.go(-1)" size="large" type="primary" plain>
              返回&nbsp;
              <return class="icon-center" theme="outline" size="20 " />
            </el-button>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>

  <el-scrollbar height="350">
    <van-text-ellipsis
      rows="3"
      :content="music.lyrics"
      :expand-text="'\n展开'"
      :collapse-text="'\n收起'"
    />
  </el-scrollbar>
</template>

<style scoped>
.header-title {
  width: 88%;
  margin: 25px auto;

  .el-header {
    font-size: 40px;
    font-weight: bold;
  }

  .el-main {
    --el-main-padding: 5px 20px !important;

    .van-row {
      margin: 8px 0;

      .icon-center {
        font-weight: bold;
      }
    }
  }
}

.el-scrollbar {
  width: 88%;
  margin: 0 auto;
}

</style>
